<template>
	<view class="pd16_15">
		<view class="box pd16_15 flex">
			<image class="tuan-buy-l" :src="buydata.img" mode="aspectFill"></image>
			<view class="tuan-buy-r pl15">
				<view v-if="mid>0" class="ft14 ftw600 cl-main">{{buydata.name}}【单集购买】【ID：{{mid}} 】</view>
				<view v-else class="ft14 ftw600 cl-main">{{buydata.title}}</view>
				<view v-if="mid>0" class="mt12 alcenter">
					<view>
						<text class="ft14 cl-orange">单集会员价：</text>
						<text class="ft16 cl-orange ftw600">¥{{buydata.vippriced}}</text>
					</view>
					<view>
						<text class="ft14 cl-notice">单集普通价：</text>
						<text class="ft14 cl-notice text-line">¥{{buydata.priced}}</text>
					</view>
				</view>
				<view v-else class="mt12 alcenter">
					<view>
						<text class="ft14 cl-orange">全集会员价：</text>
						<text class="ft16 cl-orange ftw600">¥{{buydata.vippriceq}}</text>
					</view>
					<view>
						<text class="ft14 cl-notice">全集普通价：</text>
						<text class="ft14 cl-notice text-line">¥{{buydata.priceq}}</text>
					</view>

				</view>
			</view>
		</view>

		<view class="box mt16 pd16_15" style="padding: 0px;">
			<view class="address-section">
				<view class="empty-address" @tap="region_show = true">
					<view class="smll">
						<u-icon name="/static/public/images/icon_live.png" class="ml20 mr20" size="42"></u-icon>
						<text>{{ address }}</text>
					</view>
					<u-icon name="arrow-right" class="arrow-right" color="#333333" size="20"></u-icon>
				</view>
			</view>
		</view>

		<view class="box mt16 pd16_15">
			<!-- <view class="flex alcenter center">
				<text class="iconfont iconbtn_plus ft32" @click="jianAct" style="color: #5C5E66;"></text>
				<view class="ft16 ftw600 cl-main" style="width: 100rpx; text-align: center;">{{num}}</view>
				<text class="iconfont iconbtn_add ft32"   @click="jiaAct"  :style="{color:tempColor}"></text>
			</view>
			<view class="bd-line mt16 mb16"></view>
			<view class="flex alcenter space">
				<text class="ft14 cl-info2">优惠券</text>
				<view>
					<select-coupon v-model="coupon_id" :coupons="coupons"></select-coupon>
				</view>
			</view>
			<view class="bd-line mt16 mb16"></view>
			<view class="flex alcenter space">
				<text class="ft14 cl-info2">会员优惠</text>
				<text class="ft16 cl-main ftw600">-¥20</text>
			</view>
			<view class="bd-line mt16 mb16"></view> -->

			<view class="flex alcenter space">
				<text class="ft14 cl-info2">需支付</text>
				<text class="ft16 cl-main ftw600 cl-orange">¥{{pricebuy}}</text>
			</view>
		</view>

		<view class="box mt16 pd16_15">
			<view class="ft16 pb16 ftw600 cl-main">支付方式</view>
			<view class="bd-line mt16"></view>
			<radio-group @change="changeType">
				<!-- 	<view class="pt16 pb16 flex alcenter space">
					<view class="flex alcenter">
						<text class="iconfont iconicon_pay_balance ft32 cl-green"></text>
						<text class="ml15 ft14 ftw500 cl-main">微信支付</text>
					</view>
					<view>
						<radio value="weixin" :checked="payType ==  'weixin'" :color="tempColor" />
					</view>
				</view> -->
				<view class="bd-line"></view>
				<view class="pt16 flex alcenter space">
					<view class="flex alcenter">
						<text class="iconfont iconicon_pay_balance ft32" style="color: #FFBD1E;"></text>
						<text class="ml15 ft14 ftw500 cl-main">余额支付</text>
						<!-- <text class="ml10 ft12 cl-notice">余额为0，不可用</text> -->
					</view>
					<view>
						<radio value="money" :checked="payType ==  'money'" :disabled="false" />
					</view>
				</view>
			</radio-group>
		</view>
		<view class="form-footer-h">
			<view class="form-footer form-footer-h">
				<!-- <view class="form-footer-main pd10_15">
					<button v-if="mid>0" class="btn-big" @click="okTap" >支付 ¥{{pricebuy}}</button>
					<button v-else class="btn-big" @click="okTap" >支付 ¥{{pricebuy}}</button>
				</view> -->
				<view v-if="mid>0" class="dibut" @click="okTap">
					<view>支付 ¥{{pricebuy}}</view>
				</view>
				<view v-else class="dibut" @click="okTap">
					<view>支付 ¥{{pricebuy}}</view>
				</view>
			</view>
		</view>

		<u-picker mode="region" :level="1" ref="uPicker" v-model="region_show" :area-code="region_code"
			@confirm="confirmRegion" />

	</view>
</template>
<script>
	export default {
		data() {
			return {
				payType: 'money',
				num: 1,
				coupon_id: 0,
				buydata: [],
				buytype: '余额',
				dataList: [],
				money: 0,
				mid: 0,
				openid: '',
				pricebuy: 0,
				wxlx: 'wxh5',
				coupons: [{
						coupon_id: 1,
						num: 20
					},
					{
						coupon_id: 2,
						num: 30
					},
					{
						coupon_id: 3,
						num: 40
					},
				],
				address: '请您先选择区域',
				region_show: false,
				region_code: [],
				region_code_str: '',
			}
		},
		onLoad(option) {
			if (option.mid) {
				this.mid = option.mid
			}
			this.buydata = uni.getStorageSync("buydata")
			if (this.mid > 0 && this.buydata.isvip == 2) {
				this.pricebuy = this.buydata.vippriced
			} else if (this.mid > 0 && this.buydata.isvip == 1) {
				this.pricebuy = this.buydata.priced
			} else if (this.mid == 0 && this.buydata.isvip == 2) {
				this.pricebuy = this.buydata.vippriceq
			} else if (this.mid == 0 && this.buydata.isvip == 1) {
				this.pricebuy = this.buydata.priceq
			}
			//#ifdef H5
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				this.wxlx = 'wxgzh';
			}
			//#endif
		},
		onShow() {
			// if (this.app.CHECK_LOGIN(this)) {
			//this.ongrzlTap()
			// this.money=uni.getStorageSync("userinfo").money 
			// }
		},
		computed: {
			getCouponMoney() {
				if (this.coupons.length > 0) {
					for (var a in this.coupons) {
						if (this.coupons[a].coupon_id == this.coupon_id) {
							return this.coupons[a].num;
						}
					}
				}
				return 0;
			}
		},
		methods: {
			confirmRegion(e) {
				this.region_code_str = e.province.value + ',' + e.city.value + ',' + e.area.value;
				this.address = '区域：' + e.province.label + '-' + e.city.label + '-' + e.area.label;
			},

			okTap() {
				if (this.region_code_str == '') {
					this.$u.toast('请您先选择区域');
					return;
				}
				var thia = this;
				this.dataList = this.buydata;

				this.dataList.sum = 1;
				this.dataList.buytype = this.buytype;
				let data = this.dataList;
				data.pricebuy = thia.pricebuy;
				data.region_code_str = this.region_code_str;

				if (this.mid > 0) {
					data.lx = 2; //1 全章购买 2单集购买
					data.smid = this.mid;
					data.namet = data.name + '【单集购买】【ID：' + this.mid + ' 】';
				} else {
					data.lx = 1; //1 全章购买 2单集购买
					data.smid = 0;
					data.namet = data.name;
				}
				data.wxlx = this.wxlx;
				data.openid = this.openid;
				data.info = [];
				let a = this.$u.get('/movie/api.pay_movie/videopay', data).then(resa => {
					if (thia.dataList.buytype == '微信') {
						if (this.wxlx == 'wxxcx' && resa.data.code == 1) {
							//console.log(resa.data.code);
							this.wxxcx(resa.data.data);
						} else {
							// #ifdef APP-PLUS

							uni.navigateTo({
								url: '/pagesVideo/pages/webva?url=' + resa.data.data
							})
							//plus.runtime.openURL(res.data.data);
							// #endif  
							// #ifdef H5
							window.open(resa.data.data, "_self")
							// #endif 
						}
					} else if (thia.dataList.buytype == '余额') {
						if (resa.code == 1) {
							uni.showModal({
								title: '提示',
								content: resa.msg,
								showCancel: false,
								success: res => {
									uni.setStorage({
										key: 'isbuy',
										data: 2
									})
									uni.navigateBack();
								}
							});
						} else {
							if (resa.msg == '余额不足') {
								uni.showModal({
									title: '提示',
									content: resa.msg,
									showCancel: true,
									confirmText: "充值",
									success: function(res) {
										if (res.confirm) {
											var pricebuy = thia.pricebuy
											uni.navigateTo({
												url: "/pages/member/wallet/recharge?price=" +
													pricebuy * 1
											})
										} else if (res.cancel) {
											//uni.navigateBack();
										}
									}
								});
							} else {
								uni.showToast({
									title: resa.msg,
									duration: time,
									mask: true,
								});
							}
						}
					}
				})
			},
			wxxcx(data) {
				uni.requestPayment({
					"provider": 'wxpay',
					"appId": data.appId,
					"timeStamp": data.timeStamp + '',
					"nonceStr": data.nonceStr,
					"package": data.package,
					"signType": 'MD5',
					"paySign": data.sign,
					success: function(res1) {
						uni.showModal({
							title: '温馨提示',
							content: '支付成功',
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									uni.setStorage({
										key: 'isbuy',
										data: 2
									})
									uni.navigateBack();
								} else if (res.cancel) {

								}
							}
						});
						//uni.showToast({ title: '支付成功',icon:"none" });
						console.log('success:' + JSON.stringify(res1));
					},
					fail: function(err1) {
						uni.showModal({
							title: '支付失败',
							content: JSON.stringify(err1),
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									//uni.navigateBack();
								} else if (res.cancel) {

								}
							}
						});
						//uni.showToast({ title: JSON.stringify(err1),icon:"none" });
						console.log('fail:' + JSON.stringify(err1));
					}
				});
			},
			// async ongrzlTap() {
			// 	let data = {};

			// 	this.$u.post('member/api.center/getCenterInfo').then(res => {
			// 		this.userInfo = res.data.userInfo;
			// 		if(res.data.address_count == 0){
			// 			this.app.showToast('请先填写您的收货地址~','/pages/member/address/manage?type=add')
			// 		}
			// 	});
			// },
			jianAct() {
				if (this.num == 1) return;
				this.num = this.num - 1;
			},
			jiaAct() {
				if (this.num > 99) return; //后面改为库存数量
				this.num = this.num + 1;
			},
			changeType(e) {
				this.payType = e.detail.value;
				if (e.detail.value == 'money') {
					this.buytype = '余额';
				}
				if (e.detail.value == 'weixin') {
					this.buytype = '微信';
				}
			},
		}
	}
</script>

<style lang="scss">
	.dibut {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, .2);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;

		view {
			width: 691rpx;
			height: 75rpx;
			background: #F76E00;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 75rpx;
			text-align: center;
		}
	}

	.tuan-buy-l {
		width: 200rpx;
		height: 150rpx;
		background: #F2F2F2;
	}

	.tuan-buy-r {
		width: calc(100% - 200rpx);
	}

	.address-section {
		padding: 30rpx 0;
		background: #fff;
		position: relative;
		margin: 20rpx;
		border-radius: 10px;

		.empty-address {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 600;
			padding: 20rpx 0;
		}

		.address-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90rpx;
			color: #888;
			font-size: 44rpx;
		}
	}
</style>